<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>基本资料</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<include file="public/comm"/>
	</head>

	<body class="mui-fullscreen">
		<include file="public/bottom_nav" />
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar fs_xl">
				</div>
				<div class="mui-pages fs_xl">
				</div>
			</div>
		</div>
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left fs_xl">
					<span class="mui-icon mui-icon-left-nav fs_xxi"></span>
				</button>
				<h1 class="mui-center mui-title black_m fs_xl">基本资料</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!--<div class="per_i">
							<a>
								<p class="fs_xl">等级</p>
								<p class="fs_m">VIP1</p>
							</a>
							<a>
								<p class="fs_xl">签到</p>
								<p class="fs_m">4次</p>
							</a>
							<a>
								<p class="fs_xl">分享二维码</p>
								<p class="fs_m">3次</p>
							</a>
						</div>-->
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell fs_xl cls">
								<a href="#nicheng" class="mui-navigate-right nicheng" >昵称<span id="name2">{$user.nickname}</span></a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#notifications" class="mui-navigate-right">修改登录密码</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="{:U('Mobile/User/address_list')}" class="mui-navigate-right">管理收货地址</a>
							</li>
							<li class="mui-table-view-cell">
								<if !empty($user.mobile)>
									<a href="#general" class="mui-navigate-right mob">绑定手机设置<span>{$user.mobile}</span></a>
								<else>
									<a href="#general" class="mui-navigate-right">您还未绑定手机，请立即绑定</a>
								</else>
								</if>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>
		<div id="nicheng" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav fs_xl">
				<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left fs_xl" id="back">
					<span class="mui-icon mui-icon-left-nav fs_xxi"></span>
				</button>
				<h1 class="mui-center mui-title black_m fs_xl">修改昵称</h1>
				<button type="button" id="nickname" class="mui-btn mui-btn-link mui-btn-nav mui-pull-right red fs_xl">保存</button>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<input type="text" value="{$user.nickname}" name="" id="newnickname" />
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="notifications" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav fs_l">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left fs_xl">
					<span class="mui-icon mui-icon-left-nav fs_xxi"></span>
				</button>
				<h1 class="mui-center mui-title black_m fs_xl">修改密码</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="one_yz">
							<p class="fs_xs">修改密码需要验证您的身份信息，平台将发送一条验证码信息至您的手机！</p>
							<div class="yanzm cls">
								<span>验证码：</span>
								<input type="text" name="" id="mobile" value="" />
								<span class="hqyzm fs_m" onclick="getCode(this)" style="color: #333;" id="J_getCode" smstype="2">获取验证码</span>
								<span class="hqyzm fs_m" onclick="getCode(this)" id="J_resetCode" style="display:none;color: #666;"><em id="J_second">60</em>秒后重发</span>
							</div>
							<div class="yz_btn"><a class="yz_next">下一步</a></div>
						</div>
						<div class="two_yz">
							<form id="">
								<div class="new_pas cls">
									<span class="fs_m">输入新密码：</span>
									<input class="fs_m" type="password" name="password" id="newpwd" value="" placeholder="不能使用旧密码" />
								</div>
								<div class="new_pas_qr cls">
									<span class="fs_m">确认新密码：</span>
									<input class="fs_m" type="password" name="password" id="newpwd2" value="" />
								</div>
								<div class="xg_btn" id="updpwd">
									<a class="yz_next">确认</a>
								</div>
							</form>
						</div>
						<div class="three_yz">
							<p class="fs_l">修改密码成功</p>
							<div class="qr_btn">
								<a href="index.html" class="yz_next">返回我的服务</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="privacy" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav fs_xl">
				<button type="button" class="mui-left mui-action-back mui-btn fs_xl mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav fs_xxi"></span>
				</button>
				<h1 class="mui-center mui-title black_m fs_xl">管理收货地址</h1>
				<a class="mui-btn-link mui-pull-right red fs_m" href="#add_atr">添加</a>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="atr fs_xl">
							<ul>
								<li>
									<div class="atr_tit cls"><span class="yq_1 active fs_m"><i class="mui-icon mui-icon-checkmarkempty fs_s"></i></span><span class="fs_s">设为默认</span><span class="mui-icon mui-icon-trash fs_xxi delc"><em class="fs_s">删除</em></span><span class="mui-icon mui-icon-compose fs_xxi"><em class="fs_s">编辑</em></span></div>
									<div class="atr_info">
										<p class="fs_s">收货人：<span>谢谢你</span><span>{$user.mobile}</span></p>
										<p class="fs_s">收货地址：<span>四川省成都市成华区 一环路31号天堂乐园小区</span></p>
									</div>
								</li>
								<li>
									<div class="atr_tit cls"><span class="yq_1 fs_m"><i></i></span><span class="fs_s">设为默认</span><span class="mui-icon mui-icon-trash fs_xxi delc"><em class="fs_s">删除</em></span><span class="mui-icon mui-icon-compose fs_xxi"><em class="fs_s">编辑</em></span></div>
									<div class="atr_info">
										<p class="fs_s">收货人：<span>谢谢你</span><span>15884622587</span></p>
										<p class="fs_s">收货地址：<span>四川省成都市成华区 一环路31号天堂乐园小区</span></p>
									</div>
								</li>
								<li>
									<div class="atr_tit cls"><span class="yq_1 fs_m"><i></i></span><span class="fs_s">设为默认</span><span class="mui-icon mui-icon-trash fs_xxi delc"><em class="fs_s">删除</em></span><span class="mui-icon mui-icon-compose fs_xxi"><em class="fs_s">编辑</em></span></div>
									<div class="atr_info">
										<p class="fs_s">收货人：<span>谢谢你</span><span>15884622587</span></p>
										<p class="fs_s">收货地址：<span>四川省成都市成华区 一环路31号天堂乐园小区</span></p>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="add_atr" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav fs_xl">
				<button type="button" class="mui-left mui-action-back mui-btn fs_xl mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav fs_xxi"></span>
				</button>
				<h1 class="mui-center mui-title black_m fs_xl">新增收货地址</h1>
				<a class="mui-btn-link mui-pull-right red fs_m" style="background: #fff;">保存</a>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="add_atr">
							<div class="ad_name cls">
								<span class="fs_m">收货人姓名：</span>
								<input class="fs_m" type="text" />
							</div>
							<div class="ad_phone cls">
								<span class="fs_m">手机号码：</span>
								<input class="fs_m" type="text" />
							</div>
							<div class="ad_atrr cls">
								<span class="fs_m">所在地区：</span>
								<input class="fs_m" type="text"  id='showCityPicker3' class="mui-btn mui-btn-block" />
							</div>
							<div class="ad_atr_m cls">
								<span class="fs_m">详细地址：</span>
								<input class="fs_m" type="text" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="general" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav fs_xl">
				<button type="button" class="mui-left mui-action-back mui-btn fs_xl mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav fs_xxi"></span>
				</button>
				<h1 class="mui-center mui-title black_m fs_xl">修改手机号码</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="one_yz">
							<p class="fs_xs">修改绑定手机需要验证您的身份信息，平台将发送一条验证码信息至您的手机！</p>
							<div class="yanzm cls">
								<span>验证码：</span>
								<input type="text" name="" id="mobile" value="" />
								<span class="hqyzm fs_m" onclick="getCode(this)" id="J_getCode" smstype="5">获取验证码</span>
								<span class="hqyzm fs_m" onclick="getCode(this)" id="J_resetCode" style="display:none;color: #666;"><em id="J_second">60</em>秒后重发</span>
							</div>
							<div class="yz_btn"><a class="yz_next">下一步</a></div>
						</div>
						<div class="two_yz">
							<form id="">
								<div class="new_pas cls">
									<span class="fs_m">中国大陆(86)</span>
								</div>
								<div class="new_pas_qr cls">
									<span class="fs_m">手机号：</span>
									<input class="fs_m" placeholder="新手机号" id="newmobile" type="password" name="password" value="" />
								</div>
								<div class="xg_btn" id="updmobile">
									<a class="yz_next">确认</a>
								</div>
							</form>
						</div>
						<div class="three_yz">
							<p class="fs_l">绑定手机号码成功</p>
							<div class="qr_btn">
								<a href="index.html" class="yz_next">返回我的服务</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			mui.init();
			//初始化单页view
			var viewApi = mui('#app').view({
				defaultPage: '#setting'
			});
			//初始化单页的区域滚动
			mui('.mui-scroll-wrapper').scroll();
			var view = viewApi.view;
			(function($) {
				//处理view的后退与webview后退
				var oldBack = $.back;
				$.back = function() {
					if(viewApi.canBack()) { //如果view可以后退，则执行view的后退
						viewApi.back();
					} else { //执行webview后退
						oldBack();
					}
				};
				//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
				//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
				view.addEventListener('pageBeforeShow', function(e) {
					//				console.log(e.detail.page.id + ' beforeShow');
				});
				view.addEventListener('pageShow', function(e) {
					//				console.log(e.detail.page.id + ' show');
				});
				view.addEventListener('pageBeforeBack', function(e) {
					//				console.log(e.detail.page.id + ' beforeBack');
				});
				view.addEventListener('pageBack', function(e) {
					//				console.log(e.detail.page.id + ' back');
				});
			})(mui);
			$(".mob span").text($(".mob span").text().substring(0,3)+"****"+$(".mob span").text().substring(7,11));
			
			
		</script>
		<script>
			
			var isPhone = 1;
			function resetCode() {
				$('#J_getCode').hide();
				$('#J_second').html('60');
				$('#J_resetCode').show();
				var second = 60;
				var timer = null;
				timer = setInterval(function() {
					second -= 1;
					if (second > 0) {
						$('#J_second').html(second);
					} else {
						clearInterval(timer);
						$('#J_resetCode').hide();
						$('#J_getCode').show();
						$('#J_getCode').text("重新获取");
						$('#J_getCode').css("color","#f04020");
					}
				}, 1000);
			}//倒计时
			function getCode(e) {
				var smstype = e.getAttribute("smstype");//短信类型
				$.ajax({
					type:"POST",
					url:"/Mobile/User/sendSms",
					data:{"smstype":smstype},
					dataType:"json",
					async:false,//同步操作
					success:function(date){
						if(date.status == 1){
							resetCode(); //倒计时
							$(".one_yz p").html("平台已经向您的手机<span class='sj_xh'>{$user.mobile}</span>发送了一条验证码，请及时查收！");
							$(".sj_xh").text($(".sj_xh").text().substring(0,3)+"****"+$(".sj_xh").text().substring(7,11));
						}else{
							alert(date.msg);
						}
					}
				});
//				var telVal = $("#mobile").val();
//				$.get('code.html?mobile=' + telVal, function (data) {
//					alert(data.msg);
//				});			
			}
			$(function(){
				$(".yz_btn").click(function(){
					var verifycode = $('#mobile').val();
					if (verifycode == '') {
						alert('请输入验证码！');
					}else{
						$.ajax({
							type:"POST",
							url:"/Mobile/User/verifySMS",
							data:{"verifycode":verifycode},
							dataType:"json",
							async:false,//同步操作
							success:function(date){
								if(date.status == 1){
									$(".one_yz").hide();
									$(".two_yz").show();
								}else{
									alert(date.msg);
								}
							}
						});
					}
				});
				$("#updpwd").click(function(){
					var newpwd = $("#newpwd").val();
					var newpwd2 = $("#newpwd2").val();
					if(newpwd && newpwd2){
						if(newpwd == newpwd2){
							$.ajax({
								type:"POST",
								url:"/Mobile/User/upd_userinfo",
								data:{"field":"password","value":newpwd},
								dataType:"json",
								async:false,//同步操作
								success:function(date){
									if(date.status == 1){
										$(".one_yz").hide();
										$(".two_yz").show();
									}else{
										alert(date.msg);
									}
								}
							});
							$(".two_yz").hide();
							$(".three_yz").show();
						}else{
							alert("两次输入不一致");
						}
					}else{
						alert("密码不能为空");
					}
					
				});
				$("#updmobile").click(function(){
					var newmobile = $("#newmobile").val();
					if(newmobile && /^1[3|4|5|8]\d{9}$/.test(newmobile)){
						$.ajax({
							type:"POST",
							url:"/Mobile/User/upd_userinfo",
							data:{"field":"mobile","value":newmobile},
							dataType:"json",
							success:function(date){
								alert(date.msg);
								if(date.status == 1){
									location.href="/mobile/user/userinfo2.html";
								}
							}
						});
					}else{
						alert("请输入有效的手机号码");
					}
				});
					
				$(".yq_1").click(function(){
					$(this).addClass("active");
					$(this).find("i").addClass("mui-icon mui-icon-checkmarkempty fs_s");
					$(this).parents("li").siblings().find(".yq_1").removeClass("active");
					$(this).parents("li").siblings().find("i").removeClass("mui-icon mui-icon-checkmarkempty fs_s");
				});
				$(".delc").click(function(){
					$(this).parents("li").remove();
				});
				
				$("#nickname").click(function(){
					var newnickname = $('#newnickname').val();
					var nickname = "{$user.nickname}";
					if(newnickname){
						if(newnickname == nickname){
							alert("请修改昵称");
						}else{
							$.ajax({
								type:"POST",
								url:"/Mobile/User/upd_userinfo",
								data:{"field":"nickname","value":newnickname},
								dataType:"json",
								async:false,
								success:function(date){
									alert(date.msg);
									if(date.status){
										$("#name2").html(newnickname);
									}
									viewApi.back();
								}
							});
						}
					}else{
						alert("请输入修改的昵称");
					}
				});
			})
		</script>
		<script>
			(function($, doc) {
				$.init();
				$.ready(function() {
					var cityPicker3 = new $.PopPicker({
						layer: 3
					});
					cityPicker3.setData(cityData3);
					var showCityPickerButton = doc.getElementById('showCityPicker3');
					var cityResult3 = doc.getElementById('showCityPicker3');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker3.show(function(items) {
							cityResult3.value = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
				});
			})(mui, document);
		</script>
	</body>

</html>